<template>
  <div class="dashboard-editor-container">
    <iframe src="https://mes.czy3d.com/mes-scene/preview?originName=8" frameborder="0"></iframe>
    <!-- <iframe src="https://fhgszg.space.czy3d.com/openview-page/preview?originName=8588449586414034944&deployed=1" frameborder="0"></iframe> -->
    <!-- <div class="dashboard-editor-container-box">
      <div style="width: 400px;padding: 15px;background-color: #fff;">
        <panel-group @handleSetLineChartData="handleSetLineChartData" />
      </div>
      <div style="flex:1;padding: 15px;background-color: #fff;">
        <el-table
            v-loading="loading"
            :data="workorderList"
            height="190px"
            style="width: 100%;"
            row-key="workorderId"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
            <el-table-column label="工单编码"  prop="workorderCode" align="center" >
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    @click="handleView(scope.row)"
                    v-hasPermi="['mes:pro:workorder:list']"
                >{{scope.row.workorderCode}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="productSpc" :show-overflow-tooltip="true"/>
            <el-table-column label="生产进度" align="center" width="200px" >
                <template slot-scope="scope">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(((scope.row.quantityProduced/scope.row.quantity*100).toFixed(2)))"></el-progress>
                </template>
            </el-table-column>            
            <el-table-column label="需求日期" align="center" prop="requestDate" >
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>         
        </el-table>
      </div>
      <div style="width: 600px;padding: 15px;background-color: #fff;">
        <line-chart :chart-data="lineChartData" />
      </div>
      <div style="width: 300px;padding: 15px;background-color: #fff;">
        <raddar-chart />
      </div>
    </div> -->
    
    

    <!-- <el-row :gutter="32" style="padding:16px 16px 0;margin-bottom:32px;"> -->
        
    <!-- </el-row> -->
    
    <!-- <el-row style="background:#fff;padding:16px 16px 0; margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->

    <div class="dashboard-editor-container-table">
      <div class="dashboard-editor-container-table-box">
        <div class="dashboard-editor-container-table-box-left">
          <h1>产线总览</h1>
          <div class="tablebox">
            <div class="tablebox-thead">
              <div class="tablebox-thead-item1">在线设备数量</div>
              <div class="tablebox-thead-item2">运行天数</div>
              <div class="tablebox-thead-item3">今日目标产量</div>
            </div>
            <div class="tablebox-thead">
              <div class="tablebox-thead-item1">582</div>
              <div class="tablebox-thead-item2">136</div>
              <div class="tablebox-thead-item3">500</div>
            </div>
          </div>
        </div>
        <div class="dashboard-editor-container-table-box-main">
          <h1>设备运行</h1>
          <div class="tablebox">
            <div class="tablebox-thead">
              <div class="tablebox-thead-item1">正常</div>
              <div class="tablebox-thead-item2">闲置</div>
              <div class="tablebox-thead-item3">故障</div>
            </div>
            <div class="tablebox-thead">
              <div class="tablebox-thead-item1">40%</div>
              <div class="tablebox-thead-item2">20%</div>
              <div class="tablebox-thead-item3">20%</div>
            </div>
          </div>
        </div>
        <div class="dashboard-editor-container-table-box-right">
          <h1>订单进度</h1>
          <div class="tablebox">
            <div class="tablebox-thead">
              <div class="tablebox-thead-item1">编码</div>
              <div class="tablebox-thead-item2">数量</div>
              <div class="tablebox-thead-item3">状态</div>
              <div class="tablebox-thead-item4">交货日期</div>
            </div>
            <el-scrollbar style="height: 75px">
              <div class="tablebox-thead" v-for="i in orderProgressList" :key="i">
                <div class="tablebox-thead-item1" :title="i.num">{{i.num}}</div>
                <div class="tablebox-thead-item2">{{i.status}}</div>
                <div class="tablebox-thead-item3" style="line-height: 18px;" >{{i.name}}</div>
                <div class="tablebox-thead-item4" :title="i.date">{{i.date}}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="dashboard-editor-container-table-box">
        <div class="dashboard-editor-container-table-box-left">
          <h1>产能统计</h1>
          <div class="tablebox1">
            <div class="tablebox1-thead">
              <div class="tablebox1-thead-item1">日期</div>
              <div class="tablebox1-thead-item2">合格率</div>
            </div>
            <el-scrollbar style="height: 75px">
              <div class="tablebox1-thead" v-for="i in capacityStatisticsList" :key="i">
                <div class="tablebox1-thead-item1">{{i.date}}</div>
                <div class="tablebox1-thead-item2">{{i.status}}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="dashboard-editor-container-table-box-main">
          <h1>产品合格率</h1>
          <div class="tablebox1">
            <div class="tablebox1-thead">
              <div class="tablebox1-thead-item1">日期</div>
              <div class="tablebox1-thead-item2">目标产量</div>
              <div class="tablebox1-thead-item2">实际产量</div>
            </div>
            <el-scrollbar style="height: 75px">
              <div class="tablebox1-thead" v-for="i in capacityStatisticsList1" :key="i">
                <div class="tablebox1-thead-item1">{{i.date}}</div>
                <div class="tablebox1-thead-item2">{{i.status}}</div>
                <div class="tablebox1-thead-item2">{{i.status}}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="dashboard-editor-container-table-box-right">
          <h1>设备OEE</h1>
          <div class="tablebox1">
            <div class="tablebox1-thead">
              <div class="tablebox1-thead-item1">日期</div>
              <div class="tablebox1-thead-item2">占比</div>
            </div>
            <el-scrollbar style="height: 75px">
              <div class="tablebox1-thead" v-for="i in capacityStatisticsList2" :key="i">
                <div class="tablebox1-thead-item1">{{i.date}}</div>
                <div class="tablebox1-thead-item2">{{i.status}}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listWorkorder } from "@/api/mes/pro/workorder";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
        loading: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // status:'CONFIRMED'
        },
        workorderList: [],
        lineChartData: lineChartData.newVisitis,
        orderProgressList: [
          { name: '进行中', num: 'SO267837672991', status: '50', date: '2025/2/12 0:00' },
          { name: '进行中', num: 'SO267837672998', status: '60', date: '2025/2/13 0:00' },
          { name: '进行中', num: 'SO267841582229', status: '53', date: '2025/2/13 0:00' },
          { name: '未开始', num: 'SO267840910778', status: '80', date: '2025/2/15 0:00' },
          { name: '未开始', num: 'SO267839365739', status: '72', date: '2025/2/16 0:00' },
        ],
        capacityStatisticsList: [
          { status: '99.50%', date: '2025/1/21' },
          { status: '99.80%', date: '2025/1/22' },
          { status: '99.80%', date: '2025/1/23' },
          { status: '99.20%', date: '2025/1/24' },
          { status: '99.60%', date: '2025/2/5' },
          { status: '99.75%', date: '2025/2/6' },
          { status: '99.53%', date: '2025/2/7' },
          { status: '99.48%', date: '2025/2/8' },
          { status: '99.88%', date: '2025/2/9' },
        ],
        capacityStatisticsList1: [
          { num: 50, status: 50, date: '2025/1/21' },
          { num: 60, status: 58, date: '2025/1/22' },
          { num: 70, status: 69, date: '2025/1/23' },
          { num: 80, status: 80, date: '2025/1/24' },
          { num: 65, status: 63, date: '2025/2/5' },
          { num: 58, status: 58, date: '2025/2/6' },
          { num: 68, status: 67, date: '2025/2/7' },
          { num: 75, status: 73, date: '2025/2/8' },
          { num: 100, status: 95, date: '2025/2/9' },
        ],
        capacityStatisticsList2: [
          { status: '82.30%', date: '2025/1/21' },
          { status: '85.60%', date: '2025/1/22' },
          { status: '89.60%', date: '2025/1/23' },
          { status: '78.40%', date: '2025/1/24' },
          { status: '78.40%', date: '2025/2/5' },
          { status: '75.80%', date: '2025/2/6' },
          { status: '79.80%', date: '2025/2/7' },
          { status: '82.80%', date: '2025/2/8' },
          { status: '86.60%', date: '2025/2/9' },
        ],
    }
  },
  created(){
      this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listWorkorder(this.queryParams).then(response => {
        this.workorderList = response.rows;
        this.loading = false;
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
  height: 100%;
}
</style>

<style lang="scss" scoped>

.dashboard-editor-container {
  width: 100%;
  // height: 260px;
  // padding: 10px;
  // background-color: transparent;
  // border-radius: 15px;
  // position: relative;
  // background-color: #e3e4e9;
  // padding: 0 10px;
  height: 100vh;
  // position: relative;
  iframe{
    // position: absolute;
    width: 100%;
    // height: 650px;
    height: 100%;
    // z-index: -1;
  }
  &-box{
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    div{
      background-color: transparent !important;
      z-index: 99;
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  &-table{
    width: 1000px;
    height: 360px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    &-box{
      display: flex;
      height: 180px;
      border-radius: 10px;
      overflow: hidden;
      color: #fff;
      border-bottom: 1px solid #fff;
      background-color: rgba(0, 0, 0, 0.4);
      h1{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0%;
        margin: 0 0 10px 0;
      }
      &-left{
        width: 333px;
        height: 100%;
        padding: 20px;
        .tablebox{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 100px;
            }
            &-item2{
              width: 65px;
            }
            &-item3{
              width: 100px;
            }
          }
        }
        .tablebox1{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 150px;
            }
            &-item2{
              width: 150px;
            }
          }
        }
      }
      &-main{
        // width: 40%;
        flex: 1;
        height: 100%;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 20px;
        .tablebox{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 65px;
            }
            &-item2{
              width: 65px;
            }
            &-item3{
              width: 100px;
            }
          }
        }
        .tablebox1{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 80px;
            }
            &-item2{
              width: 80px;
            }
            &-item3{
              width: 80px;
            }
          }
        }
      }
      &-right{
        width: 333px;
        height: 100%;
        padding: 20px;
        .tablebox{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 110px;
              white-space: nowrap; /* 强制文本在一行内显示 */
              overflow: hidden; /* 隐藏超出容器的文本 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
            }
            &-item2{
              width: 50px;
            }
            &-item3{
              width: 60px;
              
            }
            &-item4{
              width: 100px;
              white-space: nowrap; /* 强制文本在一行内显示 */
              overflow: hidden; /* 隐藏超出容器的文本 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
            }
          }
        }
        .tablebox1{
          &-thead{
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            &-item1{
              width: 150px;
            }
            &-item2{
              width: 150px;
            }
          }
        }
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
